<%@ include file="/common/taglibs.jsp"%>
<head>
    <title><fmt:message key="jobsearch.title"/></title>
    <meta name="menu" content="JobSearch"/>
    <script type="text/javascript" src="<c:url value='/scripts/main.js'/>"></script>
</head>
<div class="container-fluid">
	<div class="row-fluid">
		<div id="leftPanel" class="span4 table-bordered"  style="border-style:none none none solid;height: 2000px;background-color: #FBFBFC; padding: 5px;">
		
		    <form class="form-horizontal" id="searchForm">
				<div class="control-group">
					<div class="controls" style="margin-left: 0px;">
						<input type="text" id="jobName" name="jobName" placeholder="<fmt:message key="jobsearch.label.job"/>"/>
					</div>
				</div>
				<div class="control-group">
					<div class="controls" style="margin-left: 0px;">
						<select id="category" name="category" placeholder="<fmt:message key="jobsearch.label.category"/>" style="width: 95%">
						</select>
					</div>
				</div>
				<div class="control-group">
					<div class="controls" style="margin-left: 0px;">
						<input type="text" id="fromDate" name="fromDate" placeholder="<fmt:message key="jobsearch.label.fromDate"/>">
					</div>
				</div>
				<div class="control-group">
					<div class="controls" style="margin-left: 0px;">
						<input type="text" id="toDate" name="toDate" placeholder="<fmt:message key="jobsearch.label.toDate"/>">
					</div>
				</div>
				<div class="control-group">
				<div class="form-inline">
					<input type="text" id="fromFee" name="fromFee" placeholder="<fmt:message key="jobsearch.label.fromFee"/>" class="input-small" style="width: 118px;">
					<input type="text" id="toFee" name="toFee" placeholder="<fmt:message key="jobsearch.label.toFee"/>" class="input-small" style="width: 118px;">
				</div>
				</div>
				<p>
					<div class="controls controls-row" style="margin-left: 0px;">
						<button type="button" class="btn btn-success" onclick="jobSearch()"><i class="icon-search icon-white"></i> <fmt:message key="button.search"/></button>
				    	<button type="button" class="btn"><fmt:message key="button.clear"/></button>
					</div>
				</p>
		    </form>
		            
		</div>
		<div id="rightPanel" class="span8 table-bordered"  style="border-style:none none none solid;height: 2000px;background-color: #FBFBFC; padding: 5px;">
		
	        <table class="table table-bordered">
              <thead>
                <tr>
                  <th><fmt:message key="jobsearch.table.header.title"/></th>
                  <th><fmt:message key="jobsearch.table.header.payment"/></th>
                  <th><fmt:message key="jobsearch.table.header.available"/></th>
                  <th><fmt:message key="jobsearch.table.header.poster"/></th>
                  <th><fmt:message key="jobsearch.table.header.date"/></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td rowspan="2">project 1</td>
                  <td>1$</td>
                  <td>3</td>
                  <td>admin</td>
                  <td>2013/06/29</td>
                </tr>
              </tbody>
            </table>
            <display:table name="list" cellspacing="0" cellpadding="0" requestURI=""
                defaultsort="1" id="jobs" pagesize="25" class="table table-condensed table-striped table-hover" export="true">
			    <display:column property="name" escapeXml="true" sortable="true" titleKey="jobsearch.table.header.jobname" style="width: 25%"
			                     url="/userform?from=list" paramId="id" paramProperty="id"/>
			    <display:column property="payment" escapeXml="true" sortable="true" titleKey="jobsearch.table.header.payment"
			                     style="width: 34%"/>
			    <display:column property="user.username" sortable="true" titleKey="jobsearch.table.header.poster" style="width: 25%" autolink="true"
			                     media="html"/>
				<display:column property="postDate" sortable="true" titleKey="jobsearch.table.header.date" style="width: 25%" autolink="true"
			                      media="html"/>
			                     
			    <display:setProperty name="paging.banner.item_name"><fmt:message key="list.job"/></display:setProperty>
			    <display:setProperty name="paging.banner.items_name"><fmt:message key="list.jobs"/></display:setProperty>
			
			    <display:setProperty name="export.excel.filename" value="Job List.xls"/>
			    <display:setProperty name="export.csv.filename" value="Job List.csv"/>
			    <display:setProperty name="export.pdf.filename" value="Job List.pdf"/>
			 </display:table>
		</div>
	</div>
</div>
 <script>
$(function() {
	$("#fromDate").datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd/mm/yy',
        showAnim: 'slide'
    });
	$("#toDate").datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd/mm/yy',
        showAnim: 'slide'
    });
	loadCategory('category');
});

function jobSearch(){
	$.ajax({
        type: "POST",
        url: "guest/jobList",
        dataType: "html",
        data: $("#searchForm").serialize(),
        error: function(jqXHR, textStatus, errorThrown){
                alert('search error: ' + textStatus + " : " + errorThrown);
            },
        success: function(data){//json data
			$("#rightPanel").html(data);
   		}
	});
}

</script>